<template>
  <div style="display: flex" v-if="imgList.length > 0">
    <div style="width: 0px;flex-grow: 1;flex-shrink: 1">
      
      
      <van-config-provider :theme-vars="gridThemeVars">
        <van-grid :column-num="3" gutter="3px" square style="max-width: 650px">
          <van-grid-item v-for="(item,index) in imgList" class="post-img-item">
            <van-image @click="showImagePreview(imgList,index)"
                       style="width: 100%;height: 100%"
                       fit="cover"
                       :src="item.url">
            </van-image>
          </van-grid-item>
        </van-grid>
      </van-config-provider>

<!--      <div v-else class="post-img-item ">-->
<!--        <van-image @click="showImagePreview(imgList,0)"-->
<!--                   class="post-img-alone"-->
<!--                   fit="contain"-->
<!--                   :src="imgList[0].url">-->
<!--        </van-image>-->
<!--      </div>-->

    </div>

  </div>
</template>

<script>
import {showImagePreview} from "vant";

export default {
  name: "ShowImg",
  props: {
    imgList: Array
  },
  setup(){
    const gridThemeVars = {
      gridItemContentPadding: '0 0'
    }
    return{
      gridThemeVars
    }
  },
  methods: {
    showImagePreview(imgList,index){
      showImagePreview({
        images: imgList.map(item=>{return item.url}),
        startPosition: index,
        closeable: true
      })
    },
  }
}
</script>

<style lang="less" scoped>
.post-img-item{
  min-width: 80px;
  min-height: 80px;
  max-height: 200px;
}
.post-img-alone{
  min-width: 80px;
  min-height: 80px;
  max-width: 100%;
  max-height: 200px;
  :deep(img) {
    max-height: 200px;
  }
}
</style>